<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{main.title}">主页面</title>
    <style>

        #user-info-btn-id{
            text-align: unset;
            padding-left: 43px;
            padding-bottom: 10px;
        }

        #user-info-ul-id{
            background-color: white;
            padding-left: 26px;
            z-index: 999;
        }
        ul#user-info-ul-id > li > a{
            text-align: left;
        }
        ul.user-info-hide > li{
            display: none !important;
        }
        .fade{
            display: none;
        }
        .fade.in{
            display: block !important;
        }
        .second-menu{
            display: none !important;
        }
        .service-menu.nav > li > a{
            padding-left: 5px;
        }
        .hide-bar{
            position: absolute;
            top:119px;
            right: 90px;
        }

        .show-bar{
            position: absolute;
            top:22px;
            right: 90px;
            display: none;

        }

        li.active > a
        {
            text-decoration: none;
            background-color: #eee;
        }
        .hide-menu-bar{
            flex-basis: 10px;
            display:flex;
            flex-direction:column;
            justify-content: center;
            align-content: center;
        }
    </style>
    <script th:inline="javascript">
        $(function () {
            $("#user-info-btn-id").click(function (event) {
                event.stopPropagation();
                $("#user-info-ul-id").removeClass("user-info-hide");
                console.info("#user-info-btn click")
            });
            $("body").click(function () {
                $("#user-info-ul-id").addClass("user-info-hide");
                console.info("#body click")
            });

            $("ul.gd-sys-menu > li").click(function (event) {
                event.stopPropagation();
                $("ul.gd-sys-menu > li").removeClass("active");
                $(this).addClass("active");
                var forid = $(this).attr("forid");
                // console.info("forid:" + forid);
                $("ul.service-menu").removeClass("in active");
                $("#" + forid).addClass("in active");


            });

            $("ul.gd-sys-menu > li:first").click();
            $("ul.service-menu > li > a").click(function () {
                var dom = $(this).parent();
                var list = dom.find("ul.second-menu");
                var li = $(this).find("i");
                if(list.length > 0){

                    dom.find("ul").removeClass("second-menu");
                    li.addClass("glyphicon-triangle-bottom");
                    li.removeClass("glyphicon-triangle-right")
                }else{
                    dom.find("ul").addClass("second-menu");
                    li.removeClass("glyphicon-triangle-bottom");
                    li.addClass("glyphicon-triangle-right")
                }

            });
            //隐藏头部导航
            $(".hide-bar").click(function () {
                $("#header-nav-id").css("display","none");
                $(".hide-bar").css("display","none");
                $(".show-bar").css("display","block")
            });
            //显示头部导航
            $(".show-bar").click(function () {
                $("#header-nav-id").css("display","block");
                $(".show-bar").css("display","none");
                $(".hide-bar").css("display","block");
            });
            //激活菜单
            $("ul.page-menu > li").click(function(){
                $("ul.page-menu > li").removeClass("active");
                $(this).addClass("active");
            });
            //隐藏左侧菜单
            $("#menu-hide-btn-id").click(function () {
                $("#service-menu-bar-id").hide();
                $("#menu-hide-btn-id").hide();
                $("#menu-show-btn-id").show();

            });
            //显示左侧菜单
            $("#menu-show-btn-id").click(function () {
                $("#service-menu-bar-id").show();
                $("#menu-show-btn-id").hide();
                $("#menu-hide-btn-id").show();
            });
        });//readys
    </script>
</head>
<body style="display: flex;flex-direction: column;margin: 1px">
<header id="header-nav-id" style="flex-basis: 97px;">
    <img th:if="${session.lang} eq 'en'"  th:src="@{/assets/images/nt.png}">
    <img th:if="${session.lang} eq 'zh'"  th:src="@{/assets/images/nt .png}">

    <div style="position: absolute; top:32px;right: 300px;height: 97px;align-content: center;">
        <a class="btn" th:href="@{/#(lang=zh)}" th:text="#{login.chinese}">中文</a>
        <a class="btn" th:href="@{/#(lang=en)}" th:text="#{login.english}">英文</a>
    </div>

    <div style="position: absolute; top:32px;right: 100px;width:175px;align-content: flex-start;">
        <a  id="user-info-btn-id" class="btn" style="display: block">
            <i class="glyphicon glyphicon-user"></i>
            <span sec:authentication="principal.niceName"></span>
        </a>
        <ul id="user-info-ul-id" class="nav user-info-hide" style="display: block">
            <li>
                <a class="btn" >
                    <i class="glyphicon glyphicon-pencil"></i>
                    <span th:text="#{main.user.modify}"></span>
                </a>
            </li>
            <li>
                <a class="btn">
                    <i class="glyphicon glyphicon-lock">

                    </i>
                    <span th:text="#{main.user.passwd}"></span>
                </a>
            </li>
            <li>
                <a class="btn" th:href="@{/logout}">
                    <i class="glyphicon glyphicon-off"></i>
                    <span th:text="#{main.user.logout}"></span>
                </a>
            </li>
        </ul>
    </div>
</header>


<nav style="flex-basis: 40px">
    <ul class="gd-sys-menu nav nav-tabs">
        <li th:each="item: ${session.menuList}" th:forid="'menu_' + ${item.menuId}">
            <a>
                <i th:class="${item.menuIcon}"></i>
                <span th:text="${item.menuName}"></span>
            </a>
        </li>

    </ul>
    <a class="btn hide-bar">
        <i class="glyphicon glyphicon-menu-up"></i>
    </a>
    <a class="btn show-bar">
        <i class="glyphicon glyphicon-menu-down"></i>
    </a>
</nav>

<section style="flex-grow: 1;display: flex;flex-direction: row;">
    <nav id="service-menu-bar-id" style="flex-basis: 150px">
        <ul th:each="menu1 : ${session.menuList}" class="service-menu nav navbar-btn tab-pane fade" th:id="'menu_' + ${menu1.menuId}">
            <li th:each="menu2: ${menu1.children}">
                <a class="btn">
                    <i class="glyphicon glyphicon-triangle-bottom"></i>
                    <span th:text="${menu2.menuName}"></span>
                </a>
                <ul  class="nav navbar-btn page-menu" style="margin-left: 20px;">
                    <li th:each="menu3:${menu2.children}">
                        <a class="btn" th:href="${menu3.menuUrl}" target="ifram-contents">
                            <i th:class="${menu3.menuIcon}"></i>
                            <span th:text="${menu3.menuName}"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <nav class="hide-menu-bar">
        <a id="menu-hide-btn-id" class="btn">
            <i class="glyphicon glyphicon-menu-left"></i>
        </a>
        <a id="menu-show-btn-id" class="btn" style="display: none">
            <i class="glyphicon glyphicon-menu-right"></i>
        </a>
    </nav>
    <article style="flex-grow: 1">
        <iframe name="ifram-contents" id="ifram_contents-id" th:src="@{home}" style="border: none; width: 100%; height: 100%;">

        </iframe>
    </article>
</section>

</body>
</html>